<template>
    <el-row>
    <el-color>
<el-card>
    <div slot="header" class="clearfix">
        <span>
            物资申报
        </span>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        
  <el-form-item label="专业" >
    <el-input v-model="formInline.college" style="width:300px" ></el-input>
  </el-form-item>
  <el-form-item label="班级">
    <el-input v-model="formInline.classname" style="width:300px"></el-input>
  </el-form-item>
 
</el-form>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
        
        <el-form-item label="名字" >
          <el-input v-model="formInline.username" style="width:290px" ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formInline.phone" style="width:300px"></el-input>
        </el-form-item>
       
      </el-form>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="种类" style="width:250px" >
    <el-select v-model="formInline.assort" placeholder="种类">
      <el-option label="消毒物品" value="消毒物品"></el-option>
      <el-option label="口罩" value="口罩"></el-option>
      <el-option label="手套" value="手套"></el-option>
      <el-option label="体温计" value="体温计"></el-option>
      <el-option label="防护面罩" value="防护面罩"></el-option>
      <el-option label="防护服" value="防护服"></el-option>
      <el-option label="防护镜" value="防护镜"></el-option>
      <el-option label="其他" value="其他"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="名称" style="width:250px">
    <el-select v-model="formInline.mingcheng" placeholder="名称">
      <el-option label="75%消毒酒精" value="75%消毒酒精"></el-option>
      <el-option label="75%酒精免洗凝胶" value="75%酒精免洗凝胶"></el-option>
      <el-option label="84消毒液" value="84消毒液"></el-option>
      <el-option label="75%酒精消毒湿巾" value="75%酒精消毒湿巾"></el-option>
      <el-option label="紫外线消毒灯" value="紫外线消毒灯"></el-option>
      <el-option label="N95医用防护口罩" value="N95医用防护口罩"></el-option>
      <el-option label="医用外科口罩" value="医用外科口罩"></el-option>
      <el-option label="一次性医院口罩" value="一次性医院口罩"></el-option>
      <el-option label="医用检查手套" value="医用检查手套"></el-option>
      <el-option label="一次性手套" value="一次性手套"></el-option>
      <el-option label="医用电子体温计" value="医用电子体温计"></el-option>
      <el-option label="医用红外线体温枪" value="医用红外线体温枪"></el-option>
      <el-option label="防护面罩" value="防护面罩"></el-option>
      <el-option label="医用一次性防护服" value="医用一次性防护服"></el-option>
      <el-option label="护目镜" value="护目镜"></el-option>
      <el-option label="喷壶" value="喷壶"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="数量" >
    <el-input v-model="formInline.number" style="width:130px" ></el-input>
  </el-form-item>
 
 
</el-form>

<el-form :inline="true" :model="formInline" class="demo-form-inline">
        
        <el-form-item label="原因" >
          <el-input v-model="formInline.reason" style="width:800px" ></el-input>
        </el-form-item>
       
        <el-form-item  >
    <el-button type="primary" @click="open"  style="width: 90px">确定</el-button>
    
    <el-button type="primary" @click="shuaxin"  style="width: 90px" >刷新</el-button>
    
  </el-form-item>
  
      </el-form>
</el-card>
</el-color>

<el-color>
    <el-card>
        <div slot="header" class="clearfix">
            <span>
                物资申请记录
            </span>
            
        </div>
        <div>
        <el-table :data="fillterAndPageData" style="width: 100%" >
            <el-table-column prop="college" label="专业" width="150"></el-table-column>
            <el-table-column prop="classname" label="班级" width="150"></el-table-column>
            <el-table-column prop="assort" label="种类" width="150"></el-table-column>
            <el-table-column prop="mingcheng" label="名称" width="150"></el-table-column>
            <el-table-column prop="stock" label="数量" width="150"></el-table-column>
            <el-table-column prop="state" label="状态" width="150">
              
                <template slot-scope="scope">
        <el-tag
          :type="scope.row.state === '通过' ?  'success':'danger' "
          disable-transitions>{{scope.row.state}}</el-tag>
         
      </template>
            </el-table-column>
            <el-table-column prop="reson" label="原因" >
            

            </el-table-column>
          
        </el-table>
        <el-pagination
    
      @current-change="handleCurrentChange"
      :current-page.sync="pagenum"
      :page-size="6"
      layout="total, prev, pager, next"
      :total="this.total">
    </el-pagination>
      
    </div>
    </el-card>
</el-color>
</el-row>


</template>
<script>
    export default {
      data() {
        return {
            fillterAndPageData:'',
            pagenum:'',
            total:'',
          formInline: {
            username:'',
            phone:'',
            assort: '',
            mingcheng: '',
            number:'',
            college:'',
            classname:'',
            reason:'',
           

          }
        }
    },
    created(){
         this.query() 
        
       
        
        
        
        },
    methods:{
        query(){
            fetch("http://1.15.134.100:9999/wuzi4?pageNumber="+this.pagenum+"&classname="+this.formInline.classname+"&college="+this.formInline.college,{
              method:"GET",
              headers:{
                    'token': localStorage.getItem('token'),
                },
            })
            .then(res => res.json()).then(res =>{
                this.fillterAndPageData=res.data.list
                this.total=res.data.total
            

            })
        },
        open() {
       
        this.$confirm('确定申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => { 
            this.insert();
           
          this.$message({
            type: 'success',
            message: '申请成功!'
          })
          
        
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消申请'
          });          
        });
      },
      insert(){
        fetch("http://localhost:9999/wuzi3",{
            method:"POST",
            headers: {
                    'Content-type': 'application/json',
                   
                    'token': localStorage.getItem('token'),
                
                },
                body: JSON.stringify({
                  college:this.formInline.college,
                  classname:this.formInline.classname,
                  assort:this.formInline.assort,
                  mingcheng:this.formInline.mingcheng,
                  name:this.formInline.username,
                  phone:this.formInline.phone,
                  stock:this.formInline.number,
                  reason:this.formInline.reason,
            
                  

                  
                })
            
        }).then(response => response.json())
                .then(data => {
                    console.log(data);
                   
               
                 

                });
      },
   

     
      handleCurrentChange(pagenum) {
        
        this.pagenum=pagenum;
        
        this.query();
      

    },
    shuaxin(){
        this.query()
    }
    }
}
      </script>

<style>
    .clearfix{
        display: flex;
    }
    .el-form{
        display: flex;
    }
    
</style>